<template>
<div class="wrap">
  <!-- step -->
  <div class="text-center">
  <Steps :current="step" size="small">
      <Step title="申请"></Step>
      <Step title="审核中"></Step>
      <Step title="审核完成"></Step>
  </Steps>
 </div>
  
  <div class="form-wrap mt20" v-if="step==0">
    <Form :model="formItem" :label-width="80">
        <FormItem label="单位名称">
            <Input v-model="formItem.input" placeholder="单位名称" disabled></Input>
        </FormItem>
        <FormItem label="企业法人">
            <Input v-model="formItem.input" placeholder="企业法人" disabled></Input>
        </FormItem>
        <FormItem label="合作类型">
            <Select v-model="formItem.select">
                <Option value="1">省级代理商</Option>
                <Option value="2">市级代理商</Option>
                <Option value="3">县级代理商</Option>
            </Select>
        </FormItem>
        <FormItem label="市场区域">
             <v-distpicker province="浙江省" city="杭州市" area="西湖区" @province="selectProvince" @city="selectCity" @area="selectArea"></v-distpicker>
            
        </FormItem>
         <FormItem label="保证金">
            <Input v-model="formItem.input" placeholder="¥24324" disabled></Input>
        </FormItem>
         <FormItem label="企业负责人">
            <Input v-model="formItem.input" placeholder="" ></Input>
        </FormItem>
         <FormItem label="联系手机">
            <Input v-model="formItem.input" placeholder="" ></Input>
        </FormItem>
    
     <FormItem>
            <Button type="primary" style="width:160px;" @click="handleSubmit('formCustom')">提交</Button>
        </FormItem>
       
        </Form>
  </div>
  <div class="form-wrap mt20 text-center" v-else-if="step==1">
    <div class="text">
      您的审核正在申请中，需要1-2个工作日，请耐心等待...
    </div>
    <div class="mt20">
      <Button type="warning" @click="modal1=true" >去支付保证金</Button> 
      <span class="c3">20万元</span>
    </div>
    <div class="desc f12">
      <p>企业全称：浙江云创教育科技有限公司</p>
      <p>开户行：xxxxxxx</p>
      <p>银行账户：xxxxxxxxxxxxxxxxxxx</p>
    </div>
  </div>
  
  <div class="text-finish" v-else>
    恭喜，您的审核已通过！
  </div>

  <!-- dialog -->
    <Modal v-model="modal1" width="400" title="上传凭证" footer-hide  >
      <div>
        <Upload
        multiple
        type="drag"
        action="//jsonplaceholder.typicode.com/posts/">
        <div style="padding: 20px 0">
            <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
            <p>上传我的凭证</p>
        </div>
    </Upload>
      <p class="mt20 text-center">
        财务将尽快核对账户信息
      </p>
      <p class="mt20 text-center">
         <Button type="primary" style="width:200px;">确定</Button>
      </p>
      </div>
      
    </Modal>

</div>
</template>

<script>
   import VDistpicker from 'v-distpicker'
  
  export default{
    components:{VDistpicker},
    mounted () {
      this.$store.commit('UPDATE_POSITION', this.position)
    },
    data () {
      return{
        step: 0,
        select: '1',
        modal1: false,
        position: [
          {title: '我的账户', link: '/admin/myAccount'},
          {title: '我要合作', link: 'cooperation'},
          {title: '申请合作'}
        ],
        formItem: {
          imput: '',
          select: '1'
        }
        
      }
    },
    methods:{
     selectProvince(p){
       
     },
     selectCity (c) {
       
     },
     selectArea (a) {
      
     },
     handleSubmit () {
       this.step = 1
     }
    }
  }
</script>

<style lang="less" scoped>
  .wrap{
    padding: 40px; 
    width: 600px;
    margin: auto;
  }
  .form-wrap{
    margin: 40px auto;
    width: 400px;
  }
  
  .desc{
    margin-top: 70px;
    line-height: 1.9;
    text-align: left
  }
  .text-finish{
    padding: 100px 0;
  }
</style>
